<template>
  <view>
    <view class="reg_wrapper">
      <view class="field_cell_group">
        <view class="field_cell">
          <label>
            <input class="reg_field" placeholder="请输入手机号" autocomplete="off" v-model="mobile" />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input class="reg_field" type="number" placeholder="请输入验证码" autocomplete="off" v-model="code" />
          </label>
          <button size="mini" class="reg_get_btn" @click="sendSms">
            {{ sendSmsBtnText }}
          </button>
        </view>
        <view class="field_cell">
          <label>
            <input password class="reg_field" placeholder="新密码" autocomplete="off" v-model="password" />
          </label>
        </view>
        <view class="field_cell">
          <label>
            <input
              class="reg_field"
			  password
              placeholder="确认密码"
              autocomplete="off"
              v-model="repeatPassword"
            />
          </label>
        </view>
      </view>
	  <view class="btn_group">
		  <view class="btn login_btn" @click="handleSubmit">提交</view>
		  <view class="btn login_reg" @click="$emit('changeMethod', 'email')">邮箱找回密码</view>
	  </view>
    </view>
    <Captcha ref="captcha"></Captcha>
	<TopTips ref="TopTips"></TopTips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import Captcha from '@/components/captcha/index'
import {mapState} from 'vuex'
export default {
  name: 'FindPwdByMobile',
  props: ['utype'],
  components: {
    Captcha
  },
  data () {
    return {
      checked: true,
      mobile: '',
      code: '',
      password: '',
      repeatPassword: '',
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/
    }
  },
  computed:{
	  ...mapState({
		sendSmsBtnText:state => state.sendSmsBtnText
	  })
  },
  mounted () {
    this.$store.commit('clearCountDownFun')
  },
  methods: {
    // 提交之前的验证
    handleSubmit () {
      if (!this.mobile) {
		this.$refs.TopTips.show({
			title: '请输入手机号',
			type: 'error',
		})
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
		this.$refs.TopTips.show({
			title: '手机号格式不正确',
			type: 'error',
		})
        return false
      }
      if (!this.code) {
		this.$refs.TopTips.show({
			title: '请输入验证码',
			type: 'error',
		})
        return false
      }
      if (!this.password) {
		this.$refs.TopTips.show({
			title: '请输入新密码',
			type: 'error',
		})
        return false
      }
      if (!this.repeatPassword) {
		this.$refs.TopTips.show({
			title: '请再次确认密码',
			type: 'error',
		})
        return false
      }
      if (this.password !== this.repeatPassword) {
		this.$refs.TopTips.show({
			title: '两次输入的密码不一致',
			type: 'error',
		})
        return false
      }
      let postData = {
        mobile: this.mobile,
        code: this.code,
        password: this.password,
        utype: this.utype
      }
      http
        .post(api.set_pwd_bymobile, postData)
        .then(res => {
          if (parseInt(res.data.code) === 200) {
            this.$store.commit('clearCountDownFun')
            this.$emit('handlerFinish')
          } else {
			this.$refs.TopTips.show({
				title: res.data.message,
				type: 'error',
			})
            return false
          }
        })
        .catch(() => {})
    },
    // 发送验证码
    sendSms () {
      if (this.$store.state.sendSmsBtnDisabled) {
        return false
      }
      if (!this.mobile) {
		this.$refs.TopTips.show({
			title: '请输入手机号',
			type: 'error',
		})
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
		this.$refs.TopTips.show({
			title: '手机号格式不正确',
			type: 'error',
		})
        return false
      }
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_forget,
            mobile: this.mobile,
            type: this.utype,
            captcha: res
          })
          .then(response => {
            if (response.code === 200) {
			  this.$refs.TopTips.show({
			  	title: this.$store.state.sendSmsMessage,
			  	type: 'success',
			  })
            } else {
			  this.$refs.TopTips.show({
			  	title: this.$store.state.sendSmsMessage,
			  	type: 'error',
			  })
              return false
            }
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
